<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!--在线引入axios。在项目开发中会安装axios组件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div>{{ info.name }}</div>
        <div>{{ info.addres }}</div>
        <a v-bind:href="info.url">贝西说</a>
    </div>
    <script>
    var app = new Vue({
        el:"#app",
        //data: 属性
        data:function() {
            return {//需要处理(返回)后台数据在页面上渲染时使用
                info:{
                    name:null,
                    url:null,
                    addres:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted:function() {//mounted钩子函数，相当于java中main函数。可以调用methods中定义的函数
            
            axios.get('data.json').then(res=>(this.info=res.data));
        },
    })
    </script>
    <!-- 说明:
    在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
    使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
    我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！ -->
</body>
</html>